Designing an Interactive Web-Based Social Media Platform for College Students

Abstract

Effective communication is vital in any institution, particularly in universities, where students and academic personnel must work together toward academic and personal development. However, miscommunications and misunderstandings can arise due to gaps in communication between professors and students, as well as a lack of awareness of non-teaching staff. In addition, many important announcements and notices go unnoticed by students, as they are not consolidated in one location. To address these issues, we have developed a student-centered social media platform designed to foster collaborative learning and academic engagement. Our platform provides a single location for students to access important announcements, event details, program information, and more. It also offers interactive features such as discussion forums, group projects, and peer-to-peer messaging, allowing students to connect with their peers and academic personnel more easily.

Introduction

I. INTRODUCTION

In the past, web development relied heavily on the WAMP stack and Java-based applications, which required developers to manage multiple programming languages. However, recent advancements in web technologies have enabled developers to participate in both the front-end and back-end development processes of a web application. The MERN stack, a popular technology stack consisting of MongoDB, Express.js, React.js, and Node.js, allows developers to use a single programming language, JavaScript, for web development. Therefore, the primary objective of this research paper is to study the fundamentals of the MERN stack and create a social media platform based on it to support students in their academic pursuits.

In recent years, the use of social media platforms has become an integral part of college students' daily lives. However, while social media platforms offer a broad range of features, they often lack specific functionalities that are tailored to the needs of college students. This has led to the development of web-based social platforms that are specifically designed for college students. A web-based social platform for college students can serve as a centralized hub for students to connect, communicate, and collaborate with their peers. It can provide a range of features that are tailored to the unique needs of college students, such as academic resource sharing, event organization, and job networking. This paper aims to discuss the potential benefits of a web-based social platform for college students, as well as the challenges and considerations that must be taken into account during the development and implementation of a Web platform. By examining the existing literature and analysing the experiences of other social platforms, we can provide insights into how a web-based social platform can enhance the social and academic experiences of college students.

II.  OBJECTIVE

The development of modern web applications requires robust, scalable, and efficient software frameworks that enable developers to build complex applications with ease. The MERN (MongoDB, Express.js, React.js, and Node.js) stack is a popular web development framework that has gained widespread adoption in recent years. In this paper, we present the software specification of a social media platform for college students, developed using the MERN stack. Our social media platform is designed to cater specifically to the needs of college students, providing a range of features and functionalities that enhance their social networking, academic, and extracurricular experiences. The platform is built using the MERN stack, which provides a powerful and flexible foundation for the development of web applications. The MERN stack combines MongoDB, a NoSQL database that provides scalability and flexibility, with Express.js, a server-side framework that simplifies web application development. React.js, a front-end library for building user interfaces, enables developers to create dynamic and interactive user experiences. Finally, Node.js, a server-side runtime environment, provides a scalable and efficient platform for building server-side applications. In this paper, we provide a detailed software specification for the social media platform, outlining the various components, features, and functionalities of the platform. We also describe how the MERN stack is used to implement different aspects of the platform, such as the user interface, database schema, and server-side APIs.

III.  LITERATURE REVIEW

The literature survey for our research paper explores several social media platforms developed for different purposes. The first paper we reviewed is "SCREAM" The Social Media Network developed by Manav Vasisth, Aaditya Vijay Srivastava, and Udit Garg. This platform was specifically designed to provide support to individuals struggling with mental health. SCREAM enables users to communicate with each other freely and share their experiences, providing them with a supportive community to help them cope with their mental health issues.

Another social media platform we explored is Jiphy, The Social Media App for Developers, developed by Shivansh Srivastava, Sajal Tyagi, and Ishan Dixit. This platform was designed for people working at the university, providing them with a blogging site where they can interact with each other and share their work. Jiphy has all the features of a typical social media site, including sharing, posting, and interacting with other users.

In addition, we reviewed "Blog Cum Social Media Platform using Raspberry Pi," developed by Swapnesh Sanjeev Srivastava, Rohan Kumar, and Rajeev Kumar Singh. This platform is used for sharing user-generated content, such as blogs, which other users can like, share, or comment on. It is hosted on a local server using Raspberry Pi, making it a unique platform in comparison to traditional social media sites.

Finally, we explored Hau Tran's paper on "Developing a social platform based on MERN stack," which delves into the application of the MERN stack in developing a social media platform. This paper provides insights into the use of the MERN stack in the development of scalable and responsive web applications, which can be used to build a robust and user-friendly social media platform. Overall, our literature survey has highlighted the diverse applications of social media platforms and how they can be tailored to specific audiences and purposes.

IV. METHODOLOGY 

A. MERN Stack Architecture

MERN Stack could be a JavaScript Stack that's used for easier and faster deployment of full-stack web applications. MERN Stack comprises 4 technologies namely: MongoDB, Express, React, and Node.js. Each of those 4 powerful technologies provides an end-to-end framework for the developers to figure in, and every one of those technologies plays a giant part in the development of web applications. MongoDB is a NoSQL database, where each record is a document consisting of key-value pairs that are like JSON objects. 

MongoDB is flexible and allows its users to make schemas, databases, tables, etc. It stores the info of the linked frontends of the users. Once MongoDB is installed, users can make use of Mongo shell moreover. Mongo shell provides a JavaScript interface through which the users can interact and perform operations to induce the info directly within the database of the developer's page so that they can make changes, Fast to being a document-oriented database, easy to index documents. The scalability of the massive data will be handled by dividing it into several machines. The use of JavaScript MongoDB uses JavaScript, which is the biggest advantage.

Why MERN Stack? Robust API: Create a brand-new folder to begin your express project and type the below command within the electronic communication to initialize a package.json file. Accept the default settings and continue. To link new API addresses to link maps and different kinds to indicate multiple things within the website to form interesting and attractive.

1. React Front-End Library: React could be a JavaScript library that's used for building user interfaces. React is employed for single-page and mobile applications due to its ability to handle rapidly changing data. React allows users to code in JavaScript and build UI components.
2. JSX: Stands for JavaScript XML. It's an HTML/XML JavaScript Extension that is employed in React. Makes it easier and simpler to put in writing React components. 
3. Components: React JS supports Components. Components are the building blocks of UI, wherein each component encompasses logic and contributes to the general UI. These components also promote code reusability and make the general web application easier to grasp. 
4. High Performance: Features like Virtual DOM, JSX, and Components make it much faster than the remainder of the frameworks out there.
5. Node.js: JS Runtime Environment Node.js provides a JavaScript Environment which allows the user to run their code on the server. Node pack manager i.e. npm allows the user to settle on thousands of free packages (node modules) to download.

B. MVC Architecture

The MERN stack is an open-source JavaScript technology stack that uses MongoDB, Express.js, React, and Node.js for building web applications. This architecture follows the Model-View-Controller (MVC) design pattern. 

In the MERN stack, MongoDB provides the database layer, which stores all the necessary data required by the application to run. Mongoose models define the data component, which is used to interact with the database. 

Express.js and Node.js are utilized to construct the Business Logic Tier, which handles all functional programming related to the controller. This layer acts as the application server that serves as a medium of communication between the client and the database. 

The React components are used for the View part of the MVC architecture. The Client layer is built using JavaScript, HTML, and CSS with the ReactJS framework, and the user interacts with this level to access the features of the application.

Software Dependencies: When building software applications, developers often rely on pre-existing code libraries or packages known as software dependencies to expedite the development process. In the world of Node.js, a popular JavaScript runtime environment, the default package manager is called Node Package Management, or npm for short. The npm tool includes a command-line client that provides access to the npm registry, which is an extensive online repository of both free and paid private packages. By utilizing this package manager, developers can easily search, discover, and incorporate third-party libraries into their own projects, ultimately streamlining the software development process.

1. Server-side dependencies

a. MongoDB: The MongoDB Node.js driver provides a means for Node.js applications to connect to MongoDB and interact with data using an asynchronous API that utilizes Promises or traditional callbacks 

b. Mongoose: Mongoose serves as a bridge between MongoDB and the Node.js runtime environment, allowing for object-oriented JavaScript programming.

c. Nodemon: Nodemon is a tool that simplifies the process of creating Node.js applications by automatically restarting the node application whenever it detects a change in a file within the directory. It acts as a replacement for the node wrapper, making it easier for developers to monitor their changes without having to manually restart the server.

d. JWT: JSON Web Token (JWT) is a succinct, URL-safe approach to encoding claims that must be shared between two parties. Claims are represented as JSON objects within a JWT. The plaintext can then be used as a payload within a JSON Web Signature (JWS) or as part of a JSON Web Encryption (JWE) structure to allow for encryption, digital signing, or message authentication code (MAC) integrity protection.

e. Express: Express is a versatile and user friendly web application framework for Node.js that provides a wide range of functionality for developing both web and mobile applications. With access to a broad selection of HTTP utility methods and middleware, Express makes it easy to create robust APIs quickly.

f. Bcrypt: Bcrypt is a password hashing function developed by Niels Provos and David Mazieres that utilizes the Blowfish cipher. Introduced at USENIX in 1999, bcrypt is an adaptive function that can slow down over time as the number of iterations increases. This makes it more robust against brute-force search attacks, even with the rise of computational power.

 2. Client-side Dependencies

a. Axios: Axios is a library that provides a simple and intuitive way to send HTTP requests to REST endpoints asynchronously. It uses promises to handle the results of these requests, and it can be used to perform various CRUD (Create, Read, Update, Delete) operations. Axios can be used to interact with our own backend Node.js server or with external APIs, such as the Google or GitHub APIs. Common API requests include getting, posting, and deleting data, which are crucial in retrieving data to display on our applications and adding or removing data from our APIs.

b. Emoji-picker-react: The emoji-picker react is a React component that allows users to choose emojis for use in text, comments, and posts. This component is included in our application to provide users with the ability to add emojis to their messages, which can enhance the user experience.

c. React: React is a popular JavaScript library utilized for building user interfaces. The React package provides only the necessary features for defining React components. Usually, a React renderer like react-dom for the web or react-native for native applications is used in combination with it. React has the ability to quickly update and render the appropriate components when data changes.

d. React-dom: The react-dom package provides both the server and DOM renderers for React and is designed to work alongside the react package, which includes the fundamental React components. Additionally, react-dom includes specific DOM-related functionalities that can be utilized to escape the React model if necessary.

e. React Router Dom: React Router Dom is an npm package that provides a solution for incorporating dynamic routing into web applications, enabling the display of pages and visitor navigation. It is a complete routing library for React that can be used on both the client and server side. When building single-page applications or programs with multiple pages or components, React Router Dom is essential as it allows the content to be dynamically downloaded from the URL without refreshing the page. This process is known as routing, and React Router Dom is a critical tool in making it possible.

f. Material UI: Material UI is a popular React component library that provides pre-built UI elements, including icons. Material UI offers a large selection of high-quality icons that can be easily integrated into any React project. These icons are vector-based and scalable, making them ideal for creating responsive web applications. Material UI also allows for customization of the icons' color, size, and styling to match the application's design.

V. PROPOSED SYSTEM

The proposed system is designed to provide students with a user-friendly and intuitive interface that allows them to interact with their peers and access a range of academic resources. The login and registration functionality allows students to create their profiles and access the platform's features. Once logged in, students can create posts, comment on posts, and like posts shared by their peers. The platform also includes a chat functionality that enables students to communicate with their peers privately.

One of the key features of the proposed system is the ability to view and update user profiles. This allows students to share information about themselves and connect with like-minded individuals. Additionally, students can view important announcements and campus events, which keeps them informed about the latest happenings on campus. The academic calendar feature helps students to plan their schedules and stay organized, while the study materials shared by students enable them to access relevant course material and collaborate with their peers.

The proposed system also includes information about student organizations, job, and internship opportunities. This feature provides students with information about various opportunities available on campus and in the broader community, which can help them build their resumes and develop their skills.

Therefore, the proposed social media website for students offers a range of functionalities designed to enhance the social and academic experiences of college students. By providing students with a centralized and tailored platform, the proposed system aims to foster a sense of community, facilitate communication and collaboration among peers, and help students achieve their academic goals.

A. Features Comparison

The functionalities offered by the proposed social media website for students are similar to those found in other popular social media platforms, with some key differences. For example, login and registration are basic features that are present in nearly all social media platforms. Similarly, the ability to post, comment, and like content is a core feature of many social media platforms, including Facebook, Twitter, and Instagram. However, some features of the proposed platform are more specifically tailored to the needs of college students. For instance, the platform allows users to view and update their user profiles, which is particularly useful in an academic setting where users may want to showcase their academic achievements and extracurricular activities to peers and potential employers. Additionally, the platform includes a chat feature, which allows users to communicate in real time and can facilitate collaboration and discussion among students working on group projects or studying for exams.

The proposed platform also includes several features that are unique to an academic environment, such as the ability to view important announcements and campus events, as well as the academic calendar. These features provide students with important information about the college and its offerings, making it easier for them to stay up-to-date and engaged with their academic community. Moreover, the ability to view study materials shared by other students and access information about student organizations and job and internship opportunities can be particularly useful for students who are looking to expand their academic and professional horizons.

VII. FUTURE SCOPE

There are several areas for further development and improvement in the future scope of a social media platform for university students. Integration with other university systems such as class schedules and assignment submissions could provide a more centralized location for students to access academic information. Personalized recommendation systems based on student's interests and past behaviour on the platform could suggest relevant academic resources, extracurricular activities, and career opportunities. Gamification elements to incentivize academic achievement and community engagement could enhance student motivation and participation. Machine learning algorithms analysing data on user behaviour and sentiment could provide valuable insights for university administrators to improve academic support and student services. Lastly, incorporating accessibility features for students with disabilities could increase the inclusivity and reach of the platform.

The range of possibilities for future research and development is vast and will depend on the needs and preferences of developers, users, and the larger software engineering community. As technology continues to evolve and new challenges arise, it is certain that the MERN stack will continue to play a prominent role in the development of innovative social media platforms.

Conclusion

A web-based social platform for college students has the potential to enhance their social interactions and academic experiences. By providing a centralized platform for students to connect with their peers, share academic resources, and organize extracurricular activities, the platform can promote a sense of community and collaboration among college students. However, the success of such a platform depends on its design, functionality, and adoption rate by students. The platform should be user-friendly, and secure, and offer features that meet the needs and preferences of college students. In addition, the platform should be widely promoted to encourage students to use it actively.

References

[1] Shivansh Srivastava, Sajal Tyagi & Ishan Dixit, Jiphy the Social Media App for Developers - Vol 8, Issue 7, July 2021, ISSN 2394 – 2320 [2] Swapnesh Sanjeev Srivastava, Rohan Kumar & Rajeev Kumar Singh, Blog Cum Social Media Platform using Raspberry Pi - Vol 12, Issue 4, April-2021, ISSN 2229 – 5518 [3] Manav Vasisth, Aditya Srivastava & Udit Garg, \"SCREAM\" The Social Media Network - Vol. 5, Issue 10, February 2021 [4] Hau Tran, Developing a social platform based on MERN stack, March 2021 [5] K. Chaniotis, D. Kyriakou, and N. Tselikas, “Is Node.js a Viable Option for Building Web Applications? A Performance Evaluation Study,” Computing, 97(10), pp.1957-1967. [6] D. Vasanthi; T. Sivasakthi; V. Abarna; R. Arthi, “Design and Development of Car RentalWebsite Using Mern Stack” - May-2022, ISBN:978-1-6654-3042-5 [7] K. Saundariya, M. Abirami, K. R. Senthil, D. Prabakaran, B. Srimathi, and G. Nagarajan, \"Webapp Service for Booking Handyman Using Mongodb Express JS React JS Node JS\", 2021 3rd International Conference on Signal Processing and Communication (ICPSC), pp. 180-183, 2021. [8] Sourabh Mahadev Malewade, Archana Ekbote, “Performance Optimization using MERN stack on Web Application” - Vol. 10 Issue 06, June-2021, ISSN: 2278-0181 [9] “ReactJs Documentation” - https://reactjs.org/docs/getting-started.html [10] “NodeJs. Documentation.” - https://nodejs.org/en/docs/ [11] “React-DOM”. React. https://reactjs.org/docs/react-dom.html [12] ”React Router Dom”. npm. https://www.npmjs.com/package/reactrouter-dom [13] “Axios Documentation” - https://www.npmjs.com/package/axios [14] “NPM Documentation,” - https://docs.npmjs.com/. [15] ”MongoDB Node Driver” - https://www.mongodb.com/docs/drivers/node/current/ [16] ” JSON web token” - https://www.npmjs.com/package/jsonwebtoken [17] ”Express Documentation” - https://www.npmjs.com/package/express

Copyright

Copyright © 2023 Shubham Manur, Prasad Bhange, Karishma Mahajan, Jay Aher, Prof. Dnyanoba Chitre . This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.